<template>
  <div class="home-swiper">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in swiperList" :key="index">
        <img class="swiper-img" :src="item.imgUrl" alt>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  name: 'homeSwiper',
  data () {
    return {
      'swiperList': [{
        'id': '1',
        'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg'
      },
      {
        'id': '2',
        'imgUrl': 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/f4c1844c0a06ae46a11bc3c0f17c0b47.jpg_750x200_93c515e4.jpg'
      },
      {
        'id': '3',
        'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1812/d1/cd4f32e924a5a302.jpg_750x200_3d492837.jpg'
      }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.home-swiper/deep/ .swiper-pagination-bullet-active {
  background: #fff;
}
.home-swiper {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 26.7%;
  background: #eee;
}
.swiper-img {
  width: 100%;
}
</style>
